<!--如果要使用static关键字，那么需要在文件的开始加入这个关键字-->
{% load static %}

<head>
    <!--引用静态文件-->
    <link rel="stylesheet" href="https://cdn.acwing.com/static/jquery-ui-dist/jquery-ui.min.css">
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
    <!--引用自己编写的静态文件-->
    <!--这里是导入自己编写的css文件-->
    <link rel="stylesheet" href="{% static 'css/game.css' %}">
    <!--这里是导入自己编写的js文件-->
    <!--
        这里注释掉
        因为如果我们使用上述的方式导入js文件
        那么在js文件中就不能有重名的变量
        如果有重名的变量，那么就会报错
    <script src="{% static 'js/dist/game.js' %}"></script>
    -->
</head>

<body style="maigin: 0">
    <div id="ac_game_12345678"></div>
    <!--所以我们采用如下的方式导入对象-->
    <!--通过模块的方式引用-->
    <script type="module">
        // 导入AcGame对象，其余的对象都不会导入进来
        // 且AcGame不会被导入到全局变量中
        import {AcGame} from "{% static 'js/dist/game.js' %}";
        $(document).ready(function(){
            // 创建初始对象
            let ac_game = new AcGame("ac_game_12345678");
        });
        // 测试
        // console.log("hello");
    </script>
</body>
